<template>


       <div class="all-container">
        <Header></Header>
        <div class="all-container-paddingbg" >
         <el-tabs v-model="tabValue">
         <el-tab-pane label="基本信息" name="first"></el-tab-pane>
         <el-tab-pane label="修改密码" name="second"></el-tab-pane>
              <el-tab-pane label="用户管理" name="thired"></el-tab-pane>
              <UserDe v-show="tabValue === 'first'"></UserDe>
              <Password v-show="tabValue === 'second'"></Password>
              <Controller v-show="tabValue === 'thired' && role===1" ></Controller>
        </el-tabs>
        </div>
       </div>

</template>
<script>
    // //这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了
    // import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSize} from "@/api/dbhelper";
    //这一步很重要，一般我们直接从后台拿过来输出来会是在data里面，但是我发现却在store里面，这里就要用到vuex
    import { mapGetters } from "vuex";
    import Header from "../components/Header";
    import UserDe from "./comments/detail/UserDe";
    import Password from "./comments/detail/Password";
    import Controller from "./comments/detail/Controller";
    export default {
        name: "UserDetail",
        components: {Controller, Password, UserDe, Header},
        data () {
            return {
                tabValue: 'first',
                role: this.$store.getters.getUser.status
            }
        }
    };
</script>

<style>
    .el-table{

    }
    .avatar-24 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .all-container-paddingbg{
        width: 1200px;
        overflow: hidden;
        margin: 0 auto;
    }
</style>